<template>
  <div id="RoomDeatil">
    <div class="content">
      <div class="overflow-auto">
        <div style="width:100%;height:100%;">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="联系门店" name="first">
              <david-comm-form :form="form" :formLabel="openFormLabel" @blurInput="blurInput"></david-comm-form>
            </el-tab-pane>
            <el-tab-pane label="门店名称" name="second">
              <david-comm-form :form="formAddress" :formLabel="AddressForm" @blurInput="blurInput"></david-comm-form>
            </el-tab-pane>
            <el-tab-pane label="门店政策" name="third">
              <david-comm-form :form="Policy" :formLabel="PolicyForm" @blurInput="blurInput"></david-comm-form>
            </el-tab-pane>
            <el-tab-pane label="服务设施" name="fourth">
              <div style="padding:30px">
                <el-card>
                  <div style="width:100%;height:100%;position: relative;">
                    <span style="position:absolute;top: 5%;left:10px;">服务设施</span>
                    <div style="padding-top:50px;padding-left:50px;">
                      <checkbox :father="Parking_Services"></checkbox>
                    </div>
                    <div style="padding-left:50px;">
                      <checkbox :father="wifi"></checkbox>
                    </div>
                    <div style="padding-left:50px;">
                      <checkbox :father="reception_service"></checkbox>
                    </div>
                    <div style="padding-left:50px;">
                      <checkbox :father="Dining_facilities"></checkbox>
                    </div>
                    <div style="padding-left:50px;">
                      <checkbox :father="universal_facilities"></checkbox>
                    </div>
                    <div style="padding-left:50px;">
                      <checkbox :father="Business_Facilities"></checkbox>
                    </div>
                    <div style="padding-left:50px;">
                      <checkbox :father="ohter_Facilities"></checkbox>
                    </div>
                  </div>
                </el-card>
              </div>
            </el-tab-pane>
            <el-tab-pane label="门店展示" name="five">门店展示</el-tab-pane>
          </el-tabs>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DavidCommForm from '@/components/D_CommonForm/D_CommonForm.vue'
import checkbox from '@/components/checkbox/checkbox.vue'
export default {
  Name: 'BranchInformation',
  components: {
    DavidCommForm,
    checkbox
  },
  data() {
    return {
      activeName: 'first',
      checkbox: {

      },
      // 门店政策
      Policy: {
        title: '门店政策',
        cash: '',
        pet: '',
        cot: '',
        eat: '',
        check_in_time: '',
        ROOM_NOTES: '',
        Notice: ''
      },
      // -----------------  服务设施
      reception_service: {
        classify: '前台服务',
        Array: ['叫醒服务', '行李寄存', '24小时前台', '叫车服务', '旅游交通图', '前台保险柜']
      },
      wifi: {
        classify: '网络设施',
        Array: ['公共区WIFI免费']
      },
      Parking_Services: {
        classify: '停车服务',
        Array: ['免费停车场']
      },
      Dining_facilities: {
        classify: '餐饮服务',
        Array: ['中餐厅', ' 西餐厅', '咖啡厅', '送餐服务']
      },
      universal_facilities: {
        classify: '通用设施',
        Array: ['无烟楼层', ' 吸烟区', '中央空调', '电梯', '暖气', '安全报警器']
      },
      Business_Facilities: {
        classify: '商务设施',
        Array: ['多功能会议室', ' 团建套餐', '差旅低价房']
      },
      ohter_Facilities: {
        classify: '其他服务',
        Array: ['外送洗衣服务', ' 管家服务', '洗涤用具', '干洗', '安保人员']
      },
      // -----------------  服务设施
      PolicyForm: [
        {
          type: 'input',
          model: 'cash',
          label: '押金政策 ',
          width: '600px'
        },
        {
          type: 'input',
          model: 'pet',
          label: '宠物政策 ',
          width: '600px'
        },
        {
          type: 'input',
          model: 'cot',
          label: '加床政策 ',
          width: '600px'
        },
        {
          type: 'input',
          model: 'eat',
          label: '用餐说明',
          width: '600px'
        },
        {
          type: 'check_in_time',
          model: 'check_in_time',
          label: '入住时间',
          width: '600px'
        },
        {
          type: 'textarea',
          model: 'ROOM_NOTES',
          label: '入住须知',
          width: '600px'
        },
        {
          type: 'textarea',
          model: 'Notice',
          label: '订购须知',
          width: '600px'

        }
      ],
      // 地址
      formAddress: {
        title: '门店名称/地址',
        shopName: '',
        shop_area: '',
        shopAddress: ''
      },
      AddressForm: [
        {
          type: 'input',
          model: 'shopName',
          label: '门店名称 ',
          width: '600px'
        },
        {
          type: 'input',
          model: 'shop_area',
          label: '门店区域 ',
          width: '600px'
        },
        {
          type: 'input',
          model: 'shopAddress',
          label: '详细地址 ',
          width: '600px'
        }
      ],


      form: {
        title: '联系门店',
        name: '',
        contact_way: '',
        QRcode: '',
        bind: ''
      },
      openFormLabel: [
        {
          type: 'inputClues',
          model: 'name',
          label: "房东姓名",
          width2: '600px',
          clues: '仅展示于营销平台尽可能的写出您房型的特点，吸引预订，例：新店特惠 | 比邻商圈 | 大床房'
        },
        {
          type: 'textarea',
          model: 'contact_way',
          label: '联系方式',
          width: "600px"
        },
        {
          type: 'QRcode',
          model: 'QRcode',
          clues: '点击二维码可放大二维码进行扫描',
          label: "扫码添加短信通知 ",
        },
        {
          type: 'bind',
          model: 'bind',
          label: '已经添加绑定人员'
        }
      ]

    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 失去焦点执行
    blurInput(val) {
      console.log("父组件接收到了", val);

      if (!val) {
        // 渲染table 数据
        console.log(val);
      }
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__header {
  margin: 0px !important;
  background-color: white;
  margin-left: 20px;
}

::v-deep .content {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .overflow-auto {
    width: calc(100% - 190px);
    height: calc(100% - 40px);
    padding: 20px;
    overflow: auto;

    /*index.scss*/
    .el-tabs__nav {
      margin-left: 20px;
    }

    .body {
      width: 100%;
      background: white;
    }
  }
}
</style>